<template>
  <draggable
    :list="list"
    :sort="false"
    :group="{
      name: 'contract',
      pull: false,
      put: true
    }"
    @add="addBefore"
  >
    <div
      v-for="(item, index) of list"
      :key="'item-' + index"
    >
      <div class="word-content">
        <p :class="'word-' + item.type">{{getIndexsToString(index)}}{{item.text}}</p>
        <div
          v-if="!disabled && item.type === 'text'"
          class="edit-content"
        >
          <div class="edit-content_btn">
            <el-button
              :disabled="!item.isEdit"
              type="primary"
              size="mini"
              @click="editBefore(index, item)"
            >编辑</el-button>
            <el-button
              type="danger"
              size="mini"
              @click="deleteBefore(index, item)"
            >删除</el-button>
            <!-- <el-button type="primary" plain size="mini">新增条款</el-button> -->
          </div>
        </div>
      </div>

      <!-- 最多可 拖入 2级 -->
      <template v-if="level < 2">
        <word-text
          :list="item.children"
          :level="level + 1"
          :indexs="getIndexs(index)"
          :disabled="disabled"
          @delete="deleteClause"
          @edit="editClause"
          @add="addClause"
        />
      </template>
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';
import {numToHanzi} from '@/assets/utils/contract';

export default {
  name: 'WordText',
  props: {
    // 数据数组
    list: {
      type: Array,
      default: () => ([])
    },
    // 层级
    level: {
      type: Number,
      default: 1
    },
    // 索引集合
    indexs: {
      type: Array,
      default: () => ([])
    },
    disabled: {type: Boolean, default: false}
  },
  components: {draggable},
  methods: {
    // 获取当前索引集合
    getIndexs(index) {
      let indexs = this.indexs.concat(index);
      return indexs;
    },
    /**
     * 获取索引对应的文字
     * @param {Number} index 当前索引
     * @param {Boolean} isSep 是否需要结束符
     */
    getIndexsToString(index, isSep = true) {
      let isHanzi = false; // 是否为大写
      // 1级 || 类型为 title，为汉字
      if (this.level === 1) {
        isHanzi = true;
      }
      // 结束符
      let sep = isSep ? (isHanzi ? '、' : ' ') : '';

      let indexs = this.getIndexs(index);
      indexs = indexs.map(i => {
        let index = i + 1;
        return isHanzi ? numToHanzi(index) : index;
      });
      indexs = indexs.join('.');
      indexs += sep;
      return indexs;
    },

    // 删除
    deleteBefore(index, value) {
      // 存在风险等级，不可删除
      let isRisk = false;
      let riskLevelText = '';
      if (value.riskLevel === 1) {
        isRisk = true;
        riskLevelText = '轻度风险';
      } else if (value.riskLevel === 2) {
        isRisk = true;
        riskLevelText = '中度风险';
      } else if (value.riskLevel === 3) {
        isRisk = true;
        riskLevelText = '重大风险';
      }
      if (isRisk) {
        let tip = value.riskTip || `${riskLevelText}条款，不可删除！`;
        this.$alert(tip, riskLevelText, {
          type: 'warning'
        });
        return;
      }
      // 不可删除
      if (!value.isDelete) {
        this.$message({
          type: 'warning',
          message: '此条款不可删除',
          showClose: true
        });
        return;
      }

      let indexsString = this.getIndexsToString(index, false);
      this.$confirm(`确定删除 ${indexsString} 条款吗？`, '提示', {
        type: 'warning',
        showClose: false
      }).then(() => {
        this.deleteClause({
          indexs: this.getIndexs(index),
          indexsToString: this.getIndexsToString(index, false),
          value
        });
      }).catch(() => {});
    },
    // 提交 delete
    deleteClause(data) {
      this.$emit('delete', data);
    },

    // 编辑
    editBefore(index, value) {
      this.editClause({
        indexs: this.getIndexs(index),
        indexsToString: this.getIndexsToString(index, false),
        value
      });
    },
    editClause(data) {
      this.$emit('edit', data);
    },

    // 新增
    addBefore(e) {
      // 目前只能获取 text 文本
      this.addClause({
        indexs: [],
        indexsToString: '',
        value: {
          text: e.clone.innerText
        }
      });
    },
    addClause(data) {
      this.$emit('add', data);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/css/word.scss";
</style>
